Images and Decorative Elements

Images, icons and animations are not read out by a screen reader and need to have an alternative name, label or explanation to help users understand the page. Using alt text, ARIA-label and ARIA-labelledby we can help all users better understand the contents of our pages.

---

Images and icons

Images used to label other information If an image/icon is used like in the example below, the icon should be labelled with alternative text to tell the user what the information refers to. In this case alt=”Telephone”.

Informative images A text alternative should be supplied when images /icons / illustrations/ photos provide information or understanding to a concept.

Decorative images When the purpose of an image or icon is to add visual decoration you can give the image a null text alternative

---

Maps

Embedding google maps is not accessible.

• Give the map a descriptive heading and title attribute
• Determine the purpose of the map
• If the map shows landmarks read these out in an unordered list or paragraph
• If the map gives directions they need to be spelled out in clear basic text